<template>
  <el-button size="mini" type="primary" @click="dialogFormVisible = true"
    >增加</el-button
  >
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图例:
  <el-button
    size="mini"
    style="background-color: var(--el-color-danger-lighter)"
    >红色挂科</el-button
  >
  <el-button
    size="mini"
    style="background-color: var(--el-color-success-lighter)"
    >绿色通过</el-button
  >
  <el-button
    size="mini"
    style="background-color: var(--el-color-warning-lighter)"
    >黄色未编写成绩</el-button
  >
  <el-dialog v-model="xiugai" title="修改信息" @close="qingkong">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="课程ID"
        :label-width="formLabelWidth"
        prop="kecheng_id"
      >
        <el-input
          v-model="form.kecheng_id"
          autocomplete="off"
          :maxlength="3"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="学生学号"
        :label-width="formLabelWidth"
        prop="s_xuehao"
      >
        <el-input
          v-model="form.s_xuehao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
      <el-form-item label="分数" :label-width="formLabelWidth" prop="fenshu">
        <el-input
          v-model="form.fenshu"
          autocomplete="off"
          :maxlength="3"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="教师编号"
        :label-width="formLabelWidth"
        prop="t_bianhao"
      >
        <el-input
          v-model="form.t_bianhao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugai = false">取消</el-button>
        <el-button type="primary" @click="genggai('ruleForm')">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible" title="新增信息" @close="qingkong">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="课程ID"
        :label-width="formLabelWidth"
        prop="kecheng_id"
      >
        <el-input
          v-model="form.kecheng_id"
          autocomplete="off"
          :maxlength="3"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="学生学号"
        :label-width="formLabelWidth"
        prop="s_xuehao"
      >
        <el-input
          v-model="form.s_xuehao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
      <el-form-item label="分数" :label-width="formLabelWidth" prop="fenshu">
        <el-input
          v-model="form.fenshu"
          autocomplete="off"
          :maxlength="3"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="教师编号"
        :label-width="formLabelWidth"
        prop="t_bianhao"
      >
        <el-input
          v-model="form.t_bianhao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="zengjia('ruleForm')">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="tableData.slice((currentPage4 - 1) * size, currentPage4 * size)" :row-class-name="tableRowClassName">
    <el-table-column label="ID" prop="cid" width="180"></el-table-column>
    <el-table-column
      label="学生姓名"
      prop="sname"
      width="230"
    ></el-table-column>
    <el-table-column
      label="课程名称"
      prop="kname"
      width="230"
    ></el-table-column>
    <el-table-column
      label="学生学号"
      prop="xuehao"
      width="230"
    ></el-table-column>
    <el-table-column label="分数" prop="fenshu" width="100"></el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入学生姓名关键字后单击回车搜索"
          @keyup.enter="mohuchaxun"
        />
      </template>
      <template #default="scope">
        <el-button size="mini" type="primary" @click="gai(scope.row.cid)"
          >修改</el-button
        >
        <el-button size="mini" type="danger" @click="shanchu(scope.row.cid)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10,25]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
const axios = require("axios");
export default {
  name: "teacher_kechengchengji",
  data() {
    return {
      // tableRowClassName: function (row) {
      //   if (row.row.fenshu < 60) {
      //     return "warning-row";
      //   } else if (row.row.fenshu >= 60) {
      //     return "success-row";
      //   } else if (row.row.fenshu == "") {
      //     return "weishangfen-row";
      //   }
      //   return "";
      // },
       total: 0,
      size: 10,
      currentPage4: 1,
      search: "",
      t_bianhao: "",
      dialogFormVisible: false,
      xiugai: false,
      tableData: [
        {
          cid: "",
          fenshu: "",
          kname: "",
          sname: "",
          xuehao: "",
        },
      ],
      form: {
        fenshu: "",
        kecheng_id: "",
        s_xuehao: "",
        t_bianhao: "",
        delivery: false,
      },
      rules: {
        kecheng_id: [
          { required: true, message: "请输入对应的课程ID", trigger: "blur" },
          {
            min: 0,
            max: 6,
            message: "长度在 1 到 6 个字符",
            trigger: "blur",
          },
        ],
        fenshu: [
          { required: true, message: "请输入课程分数", trigger: "blur" },
          {
            min: 1,
            max: 3,
            message: "长度在 1 到 3 个字符",
            trigger: "blur",
          },
        ],
        s_xuehao: [
          { required: true, message: "请输入学生学号", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是 6 个字符",
            trigger: "blur",
          },
        ],
        t_bianhao: [
          { required: true, message: "请输入任课教师编号", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是 6 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    tableRowClassName({row,rowIndex}) {
      // `this` 指向 vm 实例
      if (row.fenshu < 60) {
        return "warning-row";
      } else if (row.fenshu >= 60) {
        return "success-row";
      } else if (row.fenshu == "") {
        return "weishangfen-row";
      }
      return "";
    },
    handleSizeChange: function (size) {
      this.size = size;
    },
    handleCurrentChange: function (currentPage4) {
      this.currentPage4 = currentPage4;
    },
    qingkong() {
      this.form = {
        fenshu: "",
        kecheng_id: "",
        s_xuehao: "",
        t_bianhao: "",
      };
    },
    gai(g) {
      this.xiugai = true;
      this.chaxunid(g);
    },
    mohuchaxun() {
      let _this = this;
      axios
        .get("https://localhost:44391/api/teacher/mohukechengchengji", {
          params: {
            mohu: _this.search,
            tbianhao: _this.t_bianhao,
          },
        })
        .then(function (response) {
          console.log(response);
          _this.tableData = response.data;
        });
    },
    genggai(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          // this.form.fenshu = parseInt(this.form.fenshu);
          this.form.kecheng_id = parseInt(this.form.kecheng_id);
          console.log(this.form);
          axios
            .get("https://localhost:44391/api/zhuce/chaxunxh", {
              params: {
                s_xuehao: this.form.s_xuehao,
              },
            })
            .then(function (A) {
              console.log(A);
              if (A.data === "") {
                _this.$notify({
                  title: "警告",
                  message: "未查询到学生学号!请检查学生学号!",
                  type: "warning",
                });
              }
              if (A.data != "") {
                axios
                  .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
                    params: {
                      t_bianhao: _this.form.t_bianhao,
                    },
                  })
                  .then(function (B) {
                    debugger;
                    console.log(B);
                    if (B.data === "") {
                      _this.$notify({
                        title: "警告",
                        message: "未查询到教师编号!请检查教师编号!",
                        type: "warning",
                      });
                    }
                    if (B.data != "") {
                      axios
                        .get(
                          "https://localhost:44391/api/teacher/chaxunkechengid",
                          {
                            params: {
                              id: _this.form.kecheng_id,
                            },
                          }
                        )
                        .then(function (C) {
                          debugger;
                          console.log(C);
                          if (C.data === "") {
                            _this.$notify({
                              title: "警告",
                              message: "未查询到您输入的课程ID!请检查课程ID!",
                              type: "warning",
                            });
                          }
                          if (C.data != "") {
                            axios
                              .post(
                                "https://localhost:44391/api/teacher/xiugaixueshengchengji",
                                _this.form
                              )
                              .then(function (D) {
                                console.log(D);
                                if (D.data >= 1) {
                                  _this.$notify({
                                    title: "成功",
                                    message: "修改成功",
                                    type: "success",
                                  });
                                  _this.xiugai = false;
                                  _this.chaxun();
                                } else {
                                  _this.$notify({
                                    title: "警告",
                                    message: "修改失败",
                                    type: "warning",
                                  });
                                }
                              });
                          }
                        });
                    }
                  });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    zengjia(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          // this.form.fenshu = parseInt(this.form.fenshu);
          this.form.kecheng_id = parseInt(this.form.kecheng_id);
          console.log(this.form);
          axios
            .get("https://localhost:44391/api/zhuce/chaxunxh", {
              params: {
                s_xuehao: this.form.s_xuehao,
              },
            })
            .then(function (A) {
              console.log(A);
              if (A.data === "") {
                _this.$notify({
                  title: "警告",
                  message: "未查询到学生学号!请检查学生学号!",
                  type: "warning",
                });
              }
              if (A.data != "") {
                axios
                  .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
                    params: {
                      t_bianhao: _this.form.t_bianhao,
                    },
                  })
                  .then(function (B) {
                    debugger;
                    console.log(B);
                    if (B.data === "") {
                      _this.$notify({
                        title: "警告",
                        message: "未查询到教师编号!请检查教师编号!",
                        type: "warning",
                      });
                    }
                    if (B.data != "") {
                      axios
                        .get(
                          "https://localhost:44391/api/teacher/chaxunkechengid",
                          {
                            params: {
                              id: _this.form.kecheng_id,
                            },
                          }
                        )
                        .then(function (C) {
                          debugger;
                          console.log(C);
                          if (C.data === "") {
                            _this.$notify({
                              title: "警告",
                              message: "未查询到您输入的课程ID!请检查课程ID!",
                              type: "warning",
                            });
                          }
                          if (C.data != "") {
                            axios
                              .post(
                                "https://localhost:44391/api/teacher/xinzengchengji",
                                _this.form
                              )
                              .then(function (D) {
                                console.log(D);
                                if (D.data >= 1) {
                                  _this.$notify({
                                    title: "成功",
                                    message: "添加成功",
                                    type: "success",
                                  });
                                  _this.dialogFormVisible = false;
                                  _this.chaxun();
                                } else {
                                  _this.$notify({
                                    title: "警告",
                                    message: "添加失败",
                                    type: "warning",
                                  });
                                }
                              });
                          }
                        });
                    }
                  });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    shanchu(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/teacher/shanchuchengji", {
          params: {
            id: id,
          },
        })
        .then(function (response) {
          console.log(response);
          if (response.data >= 1) {
            _this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          } else {
            _this.$notify({
              title: "警告",
              message: "删除失败",
              type: "warning",
            });
          }
          _this.chaxun();
        });
    },
    chaxunid(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/teacher/chaxunchengjiid", {
          params: {
            id: id,
          },
        })
        .then(function (response) {
          console.log(response.data);
          _this.form = response.data;
        });
    },
    chaxun() {
      let _this = this;
      if (this.t_bianhao == "") {
        this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/teacher/chaxunchengjipaixu", {
            params: {
              tbianhao: this.t_bianhao,
            },
          })
          .then(function (response) {
            // handle success
            console.log(response.data);
            _this.tableData = response.data;
             _this.total = response.data.length;
          });
      }
    },
  },
  mounted() {
    this.t_bianhao = this.$store.state.t_bianhao;
    this.chaxun();
  },
};
</script>

<style scoped>
.el-table >>> .warning-row {
  --el-table-tr-background-color: var(--el-color-danger-lighter);
}
.el-table >>> .success-row {
  --el-table-tr-background-color: var(--el-color-success-lighter);
}
.el-table >>> .weishangfen-row {
  --el-table-tr-background-color: var(--el-color-warning-lighter);
}
</style>